<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/principal.xhtml">

    <ui:define name="content" id="content">
        <h1 class="title ui-widget-header ui-corner-all">Bem Vindo ao Cadastro de Logradouros</h1>
        <h:form id="frmEndereco" prependId="false">
            <p:panel id="panel">

                <p:dataTable id="tabEndereco" widgetVar="tabEndereco" var="endereco" value="#{enderecoBean.lazyModelEndereco}"
                             paginator="true" rows="10" lazy="true" rowSelectListener="#{enderecoBean.onRowSelectLogradouro}"
                             selection="#{enderecoBean.selectedEndereco}" selectionMode="single"
                             rowStyleClass="#{empty rowIndex or rowIndex mod 2 ne 0 ? 'even-row' : ''}" rowIndexVar="rowIndex"
                             onRowSelectComplete="enderecoDialog.show()" onRowSelectUpdate="panel,displayEndereco">

                    <f:facet name="header">
                        Selecione uma linha e clique para Manutenção
                        <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar" onclick="pesquisaDialog.show()" type="button" />
                    </f:facet>

                    <p:column headerText="C.E.P." sortBy="#{endereco.numCep}" style="width:50px !important;">
                        <h:outputText value="#{endereco.numCep}" />
                    </p:column>

                    <p:column headerText="Descrição" sortBy="#{endereco.dscLogradouro}" style="width:300px !important;">
                        <h:outputText value="#{endereco.dscLogradouro}" />
                    </p:column>

                    <p:column headerText="Bairro" sortBy="#{endereco.codBairro.dscBairro}" style="width:300px !important;">
                        <h:outputText value="#{endereco.codBairro.dscBairro}" />
                    </p:column>

                    <p:column headerText="Cidade" sortBy="#{endereco.codBairro.codCidade.dscCidade}" style="width:300px !important;">
                        <h:outputText value="#{endereco.codBairro.codCidade.dscCidade}" />
                    </p:column>

                    <p:column headerText="U.F." sortBy="#{endereco.codBairro.codCidade.codUf.codUf}" style="width:50px !important;">
                        <h:outputText value="#{endereco.codBairro.codCidade.codUf.codUf}" />
                    </p:column>
                </p:dataTable>

                <p:dialog id="dialogEndereco" header="Detalhes Logradouro" widgetVar="enderecoDialog" resizable="true"
                          width="600" showEffect="explode" hideEffect="explode">

                    <h:panelGrid id="displayEndereco" columns="3" cellpadding="4">
                        <h:outputText value="C.E.P.:" />
                        <p:inputText id="inCep" value="#{enderecoBean.selectedEndereco.numCep}" style="width:100px; font-weight:bold;" maxlength="8"/>
                        <h:outputText value="" />

                        <h:outputText value="Descrição:" />
                        <p:inputText id="inDescricao" value="#{enderecoBean.selectedEndereco.dscLogradouro}" required="true" style="width:400px; font-weight:bold;" />
                        <h:outputText value="" />

                        <h:outputText value="Bairro:" />
                        <p:inputText id="inBairro" value="#{enderecoBean.selectedEndereco.codBairro.dscBairro}" readonly="true" style="width:400px; font-weight:bold;" />
                        <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar" onclick="pesquisaBairroDialog.show()" type="button" />

                        <h:outputText value="Cidade:" />
                        <p:inputText id="inCidade" value="#{enderecoBean.selectedEndereco.codBairro.codCidade.dscCidade}" readonly="true" style="width:400px; font-weight:bold;" />
                        <h:outputText value="" />

                        <h:outputText value="U.F.:" />
                        <p:inputText id="inUf" value="#{enderecoBean.selectedEndereco.codBairro.codCidade.codUf.codUf}" required="true" readonly="true" style="width:50px; font-weight:bold;" />
                        <h:outputText value="" />
                    </h:panelGrid>

                    <p:outputPanel rendered="#{loginBean.disableButton}">
                        <p:commandButton value="Novo" image="ui-icon ui-icon-folder-open" title="Clique para Inserir um novo Logradouro" 
                                         update="panel, display" action="#{enderecoBean.novo}" oncomplete="enderecoDialog.show()" />

                        <p:commandButton value="Inserir" update="messages,panel,tabEndereco,displayEndereco" process="@form"
                                         actionListener="#{enderecoBean.inserir}" oncomplete="enderecoDialog.hide()" rendered="#{!enderecoBean.disable}" />

                        <p:commandButton value="Alterar" update="messages,panel,tabEndereco,displayEndereco" rendered="#{enderecoBean.disable}" 
                                         actionListener="#{enderecoBean.alterar}" oncomplete="enderecoDialog.hide()" />

                        <p:commandButton value="Excluir" onclick="confirmation.show()" type="button" rendered="#{enderecoBean.disable}" />
                    </p:outputPanel>
                </p:dialog>

                <p:confirmDialog message="Confirma a Exclusão desse Logradouro?"
                                 showEffect="bounce" hideEffect="explode"
                                 header="Exclusão do Logradouro" severity="alert" widgetVar="confirmation">

                    <p:commandButton value="Sim" update="messages,panel,tabEndereco,displayEndereco" oncomplete="confirmation.hide(), enderecoDialog.hide()"
                                     actionListener="#{enderecoBean.excluir}" />
                    <p:commandButton value="Não" onclick="confirmation.hide(), enderecoDialog.hide()" type="button" />

                </p:confirmDialog>

                <p:dialog id="dialogPesquisa" header="Pesquisa dos Logradouros" widgetVar="pesquisaDialog" resizable="true"
                          width="600" showEffect="explode" hideEffect="explode" onHide="javascript:AbreJanela(false);">

                    <h:panelGrid id="displayPesquisa" columns="2" cellpadding="4">
                        <h:outputText value="C.E.P.:" />
                        <p:inputText id="numeroCep" value="#{enderecoBean.numeroCep}" style="width:100px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                            <p:ajax event="blur" process="@this"/>
                        </p:inputText>

                        <h:outputText value="Descrição:" />
                        <p:inputText id="descLogradouro" value="#{enderecoBean.descLogradouro}" style="width:400px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                            <p:ajax event="blur" process="@this"/>
                        </p:inputText>

                        <h:outputText value="Bairro:" />
                        <p:inputText id="descBairro" value="#{enderecoBean.descBairro}" style="width:400px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                            <p:ajax event="blur" process="@this"/>
                        </p:inputText>

                        <h:outputText value="Cidade:" />
                        <p:inputText id="descCidade" value="#{enderecoBean.descCidade}" style="width:400px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                            <p:ajax event="blur" process="@this"/>
                        </p:inputText>

                        <h:outputText value="U.F.:" />
                        <p:inputText id="descUf" value="#{enderecoBean.descUf}" style="width:50px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                            <p:ajax event="blur" process="@this" />
                        </p:inputText>
                    </h:panelGrid>
                    <p:commandButton id="pesqLogradouro" image="ui-icon ui-icon-search" value="Pesquisar" actionListener="#{enderecoBean.PesquisarEndereco}"
                                     oncomplete="pesquisaDialog.hide()" update="tabEndereco" process="@this,tabEndereco" onclick="javascript:AbreJanela(true);" />
                    <div id="conexao" name="conexao" style="visibility:hidden" align="center">
                        <p:fieldset legend="Aguarde ..." style="text-align: left">
                            <img src="../design/ajaxloading.gif" />
                        </p:fieldset>
                    </div>
                </p:dialog>

                <p:dialog id="dialogPesquisaBairro" header="Pesquisa dos Bairros" widgetVar="pesquisaBairroDialog" resizable="true"
                          width="600" showEffect="explode" hideEffect="explode" position="'right',30">

                    <p:dataTable id="tabBairro" widgetVar="wtabBairro" var="bairro" value="#{bairroBean.lazyModel}" paginator="true" 
                                 rows="5" lazy="true" selection="#{bairroBean.selectedBairro}" selectionMode="single"
                                 onRowSelectComplete="pesquisaBairroDialog.hide()" rowSelectListener="#{enderecoBean.onRowSelectNavigate}"
                                 onRowSelectUpdate="messages,tabEndereco,displayEndereco">

                        <f:facet name="header">
                            Selecione uma linha e clique para Seleção
                        </f:facet>

                        <p:column headerText="Bairro" sortBy="#{bairro.dscBairro}"  filterBy="#{bairro.dscBairro}" style="width:300px !important;">
                            <h:outputText value="#{bairro.dscBairro}" />
                        </p:column>

                        <p:column headerText="Cidade" sortBy="#{bairro.codCidade.dscCidade}" filterBy="#{bairro.codCidade.dscCidade}" style="width:300px !important;">
                            <h:outputText value="#{bairro.codCidade.dscCidade}" />
                        </p:column>

                        <p:column headerText="U.F." sortBy="#{bairro.codCidade.codUf.codUf}" filterBy="#{bairro.codCidade.codUf.codUf}" style="width:50px !important;">
                            <h:outputText value="#{bairro.codCidade.codUf.codUf}" />
                        </p:column>
                    </p:dataTable>
                </p:dialog>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>